<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>百度基础炫酷飞线地图</title>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=DVPI4kwxgMqXDrTx483rHkB7c3KDRyPp"
    ></script>
    <!-- 封装好的方法 -->
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <!-- 根据城市名称获取坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.119/dist/mapvgl.threelayers.min.js"></script>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #map_container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
    <script type="text/javascript">
      var map = initBMap();
      var data = initData();
      setData(map, data);
      // 初始化百度地图
      function initBMap() {
        var targetCity = mapv.utilCityCenter.getCenterByCityName('厦门');
        var map = initMap({
          tilt: 0,
          center: [targetCity.lng, targetCity.lat],
          zoom: 5,
          style: darkStyle,
        });
        return map;
      }
      // 创建数据源
      function initData() {
        var randomCount = 500;
        var data = [];
        var cities = [
          '北京',
          '天津',
          '上海',
          '重庆',
          '石家庄',
          '太原',
          '呼和浩特',
          '哈尔滨',
          '长春',
          '沈阳',
          '济南',
          '南京',
          '合肥',
          '杭州',
          '南昌',
          '福州',
          '郑州',
          '武汉',
          '长沙',
          '广州',
          '南宁',
          '西安',
          '银川',
          '兰州',
          '西宁',
          '乌鲁木齐',
          '成都',
          '贵阳',
          '昆明',
          '拉萨',
          '海口',
        ];
        // 目标点
        var targetCity = mapv.utilCityCenter.getCenterByCityName('厦门');
        // 1,实例化贝塞尔曲线
        var curve = new mapvgl.BezierCurve();

        // // 3,生成贝塞尔曲线坐标集
        // 构造数据,将其他城市的点为终点
        for (var i = 1; i < cities.length; i++) {
          var startCity = mapv.utilCityCenter.getCenterByCityName(cities[i]);
          curve.setOptions({
            start: [startCity.lng, startCity.lat],
            end: [targetCity.lng, targetCity.lat],
          });
          // 拿到要绘制的集合
          var curveModelData = curve.getPoints();
          data.push({
            geometry: {
              type: 'LineString',
              coordinates: curveModelData,
            },
          });
        }
        return data;
      }
      // 绘制数据源，先绘制线，然后绘制点，做一个沿线运动的点运动的轨迹动画
      function setData(map, data) {
        var view = new mapvgl.View({ map });
        // 初始化LineLayer实例
        var lineLayer = new mapvgl.LineLayer({
          color: 'rgba(55, 50, 250, 0.4)',
          blend: 'lighter',
        });
        // 加入到view
        view.addLayer(lineLayer);
        lineLayer.setData(data);
        // 点运行的动画与线的数据源是一致的
        var linePointLayer = new mapvgl.LinePointLayer({
          size: 20, // 点大小
          speed: 15, // 点速度
          color: 'rgba(255, 255, 0, 0.6)', // 点的颜色
          animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_UNIFORM_SPEED, // 点动画
          shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 点形状
          blend: 'lighter', // 点交互时处理方式
        });
        view.addLayer(linePointLayer);
        linePointLayer.setData(data);
      }
    </script>
  </body>
</html>
